<template>
    <a-row style="padding:0 1rem;">
        <p style="color:var(--themeColor)" class="tabs-top-title"> {{$t('User')}}{{$t('Details')}}：</p>
        <a-row :gutter='8'>
            <a-col :span='8' class='dcontent'>
                <a-col :span='12' class='uheader'>
                    {{$t('User')}}{{$t('Name')}}：
                </a-col>
                <a-col :span='12' class="ubody">
                    <!-- {{tarname.name}} -->
                    {{tarname.user_id}}
                </a-col>
            </a-col>
            <a-col :span='8' class='dcontent'>
                <a-col :span='12' class='uheader'>
                    {{$t('Nickname')}}：
                </a-col>
                <a-col :span='12' class="ubody">
                    <!-- {{tarname.dis_play_name}} -->
                    {{tarname.display_name}}
                </a-col>
            </a-col>
            <a-col :span='8' class='dcontent'>
                <a-col :span='12' class='uheader'>
                    {{$t('Status')}}：
                </a-col>
                <a-col :span='12' class="ubody">
                    {{tarname.suspended == false?$t('Enable'):$t('Disable')}}
                </a-col>
            </a-col>
            <a-col :span='8' class='dcontent'>
                <a-col :span='12' class='uheader'>
                    {{$t('Max-Buckets')}}：
                </a-col>
                <a-col :span='12' class="ubody">
                    {{tarname.max_buckets}}
                </a-col>
            </a-col>
            
            <a-col :span='16' class='dcontent'>
                <a-col :span='6' class='uheader'>
                    {{$t('Child-user')}}：
                </a-col>
                <a-col :span='18' class="ubody">
                    <span v-if="tarname.subusers?tarname.subusers.length==0:false">-</span>
                    <span v-for="(item,index) in tarname.subusers" style="padding-right:1em" :key="index" v-else>
                        <span v-if="index+1!=tarname.subusers.length">{{item.id.substring(item.id.indexOf(':')+1)}},</span>
                        <span v-else>{{item.id.substring(item.id.indexOf(':')+1)}}</span>
                    </span>
                </a-col>
            </a-col>
        </a-row>
        <p style="color:var(--themeColor)" class="tabs-top-title">{{$t('User')}}{{$t('Quota')}}：</p>
        <a-row :gutter='8'>
            <a-col :span='8' class='dcontent'>
                <a-col :span='12' class='uheader'>
                    {{$t('Status')}}：
                </a-col>
                <a-col :span='12' class="ubody">
                    {{enabled == true?$t('Active'):$t('Inactivated')}}
                </a-col>
            </a-col>
            <a-col :span='8' class='dcontent'>
                <a-col :span='12' class='uheader'>
                    {{$t('Max-quota')}}：
                </a-col>
                <a-col :span='12' class="ubody">
                   {{maxsize == -1?$t('Unlimited'):maxsize}}
                </a-col>
            </a-col>
            <a-col :span='8' class='dcontent'>
                <a-col :span='12' class='uheader'>
                    {{$t('Max-obj')}}：
                </a-col>
                <a-col :span='12' class="ubody">
                    {{maxobj == -1?$t('Unlimited'):maxobj}}
                </a-col>
            </a-col>
        </a-row>
        <p style="color:var(--themeColor)" class="tabs-top-title"> {{$t('Bucket')}}{{$t('Quota')}}：</p>
        <a-row :gutter='8'>
            <a-col :span='8' class='dcontent'>
                <a-col :span='12' class='uheader'>
                    {{$t('Status')}}：
                </a-col>
                <a-col :span='12' class="ubody">
                    {{bukenabled == true?$t('Active'):$t('Inactivated')}}
                </a-col>
            </a-col>
            <a-col :span='8' class='dcontent'>
                <a-col :span='12' class='uheader'>
                    {{$t('Max-quota')}}：
                </a-col>
                <a-col :span='12' class="ubody">
                    {{bukmaxsize == -1?$t('Unlimited'):bukmaxsize}}
                </a-col>
            </a-col>
            <a-col :span='8' class='dcontent'>
                <a-col :span='12' class='uheader'>
                    {{$t('Max-obj')}}：
                </a-col>
                <a-col :span='12' class="ubody">
                    {{bukmaxobj == -1?$t('Unlimited'):bukmaxobj}}
                </a-col>
            </a-col>
        </a-row>
    </a-row>
</template>
<script>
export default {
    name:'Detail',
    props:['tarname'],
    data(){
        return{
            enabled:'',
            maxobj:'',
            maxsize:'',
            bukenabled:'',
            bukmaxobj:'',
            bukmaxsize:'',
        }
    },
    watch:{
        tarname(val){
            this.enabled = val.user_quota.enabled
            this.maxobj = val.user_quota.max_objects
            if(val.user_quota.max_size == -1){
                this.maxsize = -1
            }else{
                this.maxsize = this.bytesToSize(val.user_quota.max_size) 
            }
            this.bukenabled = val.bucket_quota.enabled
            this.bukmaxobj = val.bucket_quota.max_objects
            if(val.bucket_quota.max_size == -1){
                this.bukmaxsize = -1
            }else{
                this.bukmaxsize = this.bytesToSize(val.bucket_quota.max_size) 
            }
        }
    },
}
</script>